<template>
    <div id='sequenceDiagram' class='sequence_diagram' :style="{'--cardwidth':config.card.width,'--linewidth':config.card.lineWidth,'--lineRight':'-'+config.card.lineWidth}">
        <div v-for="(itemRow,rowIndex) in dataList" :key="rowIndex" :class="dataList.length-1 == rowIndex?'recall_row':'recall_row justify'">
            <div class="row_item" :style="{'height':config.card.cardHeight+'px'}" v-for="(item,index) in itemRow" :key="index">
                <card-item :content="item" :index="index" :cardHeight="config.card.cardHeight" :cardwidth="config.card.width" />
                <div class="line_point" v-if="rowIndex !== dataList.length-1||index !== itemRow.length-1"></div>
            </div>
        </div>
    </div>
</template>
<script>
import CardItem from './cardItem.vue'
export default {
    name: '',
    props: ['config', 'dataList'],
    data() {
        return {
        };
    },
    components: {
        'card-item': CardItem
    },
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {},
    watch: {}
}
</script>
<style lang='less' scoped>
@roundWidth: 60px;
@roundHeight: 120px;
@roundBorderSize: 2px;
@recallRowHeight: 235px;
@arrowSize: 6px;
@lineColor: #9cc8f8;
.sequence_diagram {
    width: 100%;
    padding: 20px 70px;
    .justify {
        justify-content: space-between;
    }
    .recall_row {
        position: relative;
        width: 100%;
        height: @recallRowHeight;
        display: flex;
        // justify-content: space-between;
        align-items: center;
        .row_item {
            border-radius: 4px;
            position: relative;
            background-color: #f8fafb;
            width: var(--cardwidth);
            // height: 160px;
            border: 1px solid #e8eaec;
        }
        .row_item:not(:first-child) {
            margin-left: var(--linewidth);
        }
        .row_item:not(:last-child):after {
            position: absolute;
            content: "";
            width: var(--linewidth);
            height: 2px;
            background: @lineColor;
            right: var(--lineRight);
            top: 49.5%;
        }
        .line_point {
            position: absolute;
            right: -4px;
            top: 48%;
            width: 8px;
            height: 8px;
            background: @lineColor;
            border-radius: 50%;
        }
    }
    // 选中第一行
    .recall_row:first-child {
        .row_item:not(:first-child)::before {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            background: none;
            border: @arrowSize solid @lineColor;
            border-color: transparent transparent transparent @lineColor;
            left: -@arrowSize;
            top: 46.5%;
        }
    }
    // 除第一行
    .recall_row:not(:first-child) {
        .row_item::before {
            position: absolute;
            content: "";
            width: 0;
            height: 0;
            background: none;
            border: @arrowSize solid @lineColor;
            border-color: transparent transparent transparent @lineColor;
            left: -@arrowSize;
            top: 46.5%;
        }
    }
    // 行间隔线
    .recall_row:not(:last-child) {
        border-bottom: @roundBorderSize solid @lineColor;
    }
    // 后半圆
    .recall_row:not(:last-child):before {
        content: "";
        width: @roundWidth;
        height: @roundHeight;
        position: absolute;
        border-right: @roundBorderSize solid @lineColor;
        border-top: @roundBorderSize solid @lineColor;
        border-bottom: @roundBorderSize solid @lineColor;
        right: -@roundWidth;
        top: 49.5%;
        border-radius: 0 @roundHeight @roundHeight 0;
    }
    // 前半圆
    .recall_row:not(:first-child):after {
        content: "";
        width: @roundWidth;
        height: @roundHeight;
        position: absolute;
        border-left: @roundBorderSize solid @lineColor;
        border-top: @roundBorderSize solid @lineColor;
        border-bottom: @roundBorderSize solid @lineColor;
        left: -@roundWidth;
        top: -1%;
        border-radius: @roundHeight 0 0 @roundHeight;
    }
}
</style>